<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>建造者模式（Builder Pattern）</title>
    <!-- 
  建造者模式（Builder Pattern）是一种创建对象的设计模式，它允许使用多个简单的对象一步一步构建一个复杂的对象。建造者模式的主要目的是将对象的构建过程与表示分离，使得同样的构建过程可以创建不同的表示。

  ### 建造者模式的主要组成部分

  1. **产品（Product）**：被构建的复杂对象。
  2. **建造者（Builder）**：定义了创建产品的抽象接口。
  3. **具体建造者（Concrete Builder）**：实现了建造者接口，构建和组装产品的各个部分。
  4. **指挥者（Director）**：负责管理建造过程，使用建造者来构建产品。

  ### 建造者模式的优点

  1. **分离复杂对象的构建和表示**：可以通过不同的建造者创建不同的表示。
  2. **提高代码的可读性和可维护性**：通过将构建过程分离到建造者中，使得代码更加清晰。
  3. **支持逐步构建**：可以在构建过程中灵活地添加或修改产品的组成部分。

  ### 建造者模式的缺点

  1. **增加复杂性**：引入建造者模式可能会增加系统的复杂性，特别是在简单对象的构建场景中。
  2. **需要更多的类**：每个具体建造者都需要实现建造者接口，可能会导致类的数量增加。

  ### 示例代码

  以下是一个使用建造者模式的简单示例，构建一个 `Computer` 对象。

  #### 1. 产品类（Product）


  ```javascript
  class Computer {
      constructor() {
          this.cpu = '';
          this.ram = '';
          this.storage = '';
      }

      specs() {
          return `CPU: ${this.cpu}, RAM: ${this.ram}, Storage: ${this.storage}`;
      }
  }
  ``` 

  #### 2. 建造者接口（Builder）

  ```javascript
  class ComputerBuilder {
      setCPU(cpu) {
          throw new Error("This method must be implemented.");
      }

      setRAM(ram) {
          throw new Error("This method must be implemented.");
      }

      setStorage(storage) {
          throw new Error("This method must be implemented.");
      }

      build() {
          throw new Error("This method must be implemented.");
      }
  }
  ``` 

  #### 3. 具体建造者（Concrete Builder）

  ```javascript
  class GamingComputerBuilder extends ComputerBuilder {
      constructor() {
          super();
          this.computer = new Computer();
      }

      setCPU(cpu) {
          this.computer.cpu = cpu;
      }

      setRAM(ram) {
          this.computer.ram = ram;
      }

      setStorage(storage) {
          this.computer.storage = storage;
      }

      build() {
          return this.computer;
      }
  }
  ``` 

  #### 4. 指挥者（Director）

  ```javascript
  class Director {
      constructor(builder) {
          this.builder = builder;
      }

      constructGamingComputer() {
          this.builder.setCPU('Intel i9');
          this.builder.setRAM('32GB');
          this.builder.setStorage('1TB SSD');
      }
  }
  ``` 

  #### 5. 使用示例

  ```javascript
  const builder = new GamingComputerBuilder();
  const director = new Director(builder);

  director.constructGamingComputer();
  const gamingComputer = builder.build();

  console.log(gamingComputer.specs()); // 输出: "CPU: Intel i9, RAM: 32GB, Storage: 1TB SSD"
  ``` 

  ### 总结

  建造者模式是一种有效的设计模式，适用于构建复杂对象的场景。通过将对象的构建过程与表示分离，建造者模式提高了代码的可读性、可维护性和灵活性。在设计系统时，合理运用建造者模式可以简化复杂对象的创建过程。
  --></head>

  <body>
    <script>
      // 建造者模式是一种创建对象的设计模式，它允许使用多个简单的对象一步一步构建一个复杂的对象。建造者模式的主要目的是将对象的构建过程与表示分离，使得同样的构建过程可以创建不同的表示。

      // 创建一个产品类
      class Computer {
        constructor() {
          this.cpu = "";
          this.ram = "";
          this.storage = "";
        }
        specs() {
          return `CPU: ${this.cpu}, RAM: ${this.ram}, Storage: ${this.storage}`;
        }
      }

      // 创建一个建造者类
      class ComputerBuilder {
        constructor() {
          this.computer = new Computer();
        }
        setCPU(cpu) {
          this.computer.cpu = cpu;
        }
        setRAM(ram) {
          this.computer.ram = ram;
        }
        setStorage(storage) {
          this.computer.storage = storage;
        }
        build() {
          return this.computer;
        }
      }

      // 创建一个指挥者类
      class Director {
        constructor(builder) {
          this.builder = builder;
        }
        constructGamingComputer() {
          this.builder.setCPU("Intel i9");
          this.builder.setRAM("32GB");
          this.builder.setStorage("2TB SSD");
        }
      }

      // 使用建造者模式创建对象
      const builder = new ComputerBuilder();
      const director = new Director(builder);
      director.constructGamingComputer();
      const gamingComputer = builder.build();
      console.log(gamingComputer.specs()); // 输出: CPU: Intel i9, RAM: 32GB, Storage: 2TB SSD
    </script>
  </body>
</html>
